1 00:00:00,630 --> 00:00:01,830 Hello and welcome. 2 00:00:01,860 --> 00:00:08,610 In this video we are going to create the projet directory the hastier mail. 3 00:00:08,940 --> 00:00:13,620 So I'm going to create the directory on my desktop. 4 00:00:13,770 --> 00:00:18,320 I'm just going to right click and go and you falder. 5 00:00:18,430 --> 00:00:21,060 And I'm just going to call these. 6 00:00:21,110 --> 00:00:32,700 I can quit later so you can call yours whatever name you like and you can create for them the same way 7 00:00:33,420 --> 00:00:37,180 on a Mac and also on a window computer. 8 00:00:37,200 --> 00:00:44,650 I will be using the sublime text editor as my editor for this page. 9 00:00:44,830 --> 00:00:48,360 So I've got a new file here inside my editor. 10 00:00:48,390 --> 00:00:52,270 Im just going to save this file as an hastier mail document. 11 00:00:52,420 --> 00:01:02,640 I'm going to go file and I'm going to do this save as I'm saving it in to be free and just created I 12 00:01:02,770 --> 00:01:04,280 call even b 13 00:01:06,720 --> 00:01:10,050 dot H T L. 14 00:01:10,610 --> 00:01:15,260 And I'll click on the drub and just select email I include save. 15 00:01:15,570 --> 00:01:18,830 So any code I have in here now will be common. 16 00:01:18,870 --> 00:01:24,030 Here's mail file so you can see on the bottom right of the text. 17 00:01:24,120 --> 00:01:26,820 It is called hastier mail there. 18 00:01:26,910 --> 00:01:36,610 So the way I'm going to approach this is I'm going to add the code in I've already pre stage to code. 19 00:01:36,630 --> 00:01:38,220 So add the code. 20 00:01:38,330 --> 00:01:41,040 Now explain what your code does. 21 00:01:41,040 --> 00:01:51,870 Line by line I have added the Tier malcourt that we'll be using for this project so I am going to run 22 00:01:51,870 --> 00:01:55,680 through the code with you line by line line and run. 23 00:01:55,680 --> 00:02:03,900 Here is the dock type and the dock type is not actually part of the hastier mill document is basically 24 00:02:03,930 --> 00:02:15,540 a declaration to web browsers to tell them that the content of the document is in hastier Mail 5 document 25 00:02:16,440 --> 00:02:27,660 from line to to line 35 is the actual hastier million documents so any content we've been Line 2 to 26 00:02:27,660 --> 00:02:32,510 35 is the email content. 27 00:02:32,760 --> 00:02:39,590 So we have the head section which is on line 3 tool line 7. 28 00:02:39,870 --> 00:02:41,970 So the information were being beheaded. 29 00:02:41,980 --> 00:02:50,430 Search is not actually visible to the visitors of the application. 30 00:02:50,430 --> 00:03:00,480 The only thing they can see in the title bar is the title of the application which will appear on the 31 00:03:00,510 --> 00:03:06,500 title bar or Wembley application is launched on line 5. 32 00:03:06,510 --> 00:03:12,260 I caught a link to the external style sheet. 33 00:03:12,330 --> 00:03:17,200 I will be using for this project and when be his in the next term or see us as far. 34 00:03:17,330 --> 00:03:20,100 I have called DPA might see us. 35 00:03:20,220 --> 00:03:28,210 However I have not created a yet but when they do I will call it my DOT csx. 36 00:03:28,570 --> 00:03:31,200 Okay you can see the real part. 37 00:03:31,230 --> 00:03:38,690 This this attribute is called Real physically used when you are linking to an external stylesheet. 38 00:03:38,700 --> 00:03:49,220 This is another attribute that tells you the type document is a text and also CSA the hatred attributed 39 00:03:49,240 --> 00:03:50,060 physically. 40 00:03:50,400 --> 00:03:56,370 It's a reference to where the file he's going to be looking to because is going to be located inside 41 00:03:56,370 --> 00:03:59,430 the same direct mail file. 42 00:03:59,470 --> 00:04:03,720 All we need to do is just include the name in quotes. 43 00:04:04,140 --> 00:04:14,070 This is where the head section ends on line 7 the body section begins on line 9 and is online 34. 44 00:04:14,190 --> 00:04:26,840 So any content inside the body tag is what is actually visible to the visitor inside the body tag on 45 00:04:26,850 --> 00:04:28,000 line 11. 46 00:04:28,000 --> 00:04:34,180 I've got a Deve element and I given it I did attribute of container. 47 00:04:34,200 --> 00:04:35,820 So this is the opening. 48 00:04:36,000 --> 00:04:45,540 And this is close in deep here so I'm basically wrapping all the content inside the Deve called container 49 00:04:46,230 --> 00:04:47,690 inside the Dave. 50 00:04:47,730 --> 00:04:50,480 I've got hey one head in. 51 00:04:50,580 --> 00:04:59,590 This is going to form the title for the application and I have caught two or three inputs here. 52 00:04:59,840 --> 00:05:10,100 This is going to be form form where are you going to import the actual value of your hideout in centimetre. 53 00:05:10,450 --> 00:05:13,100 And you can see he is his height in 70 me. 54 00:05:13,120 --> 00:05:17,460 This was just going to be a label for the impled box. 55 00:05:17,480 --> 00:05:24,230 So where they need to enter their height in centimetre there's break here basically means it all give 56 00:05:24,260 --> 00:05:31,390 a break between this import and this input here to have an input tag. 57 00:05:31,740 --> 00:05:38,840 And I've got weight in kilograms this is bisley going to be the text next to the input. 58 00:05:38,890 --> 00:05:44,710 Again given the import type text is the input type is a text. 59 00:05:44,810 --> 00:05:48,670 And I've given it and I attribute centimetre. 60 00:05:49,040 --> 00:05:51,010 Same thing with the weight here. 61 00:05:51,070 --> 00:05:54,890 This input type is going to be a text input. 62 00:05:54,980 --> 00:05:57,170 Again I'm giving it an I.D. value. 63 00:05:57,680 --> 00:06:06,550 KG K G B basically means break so to leave it would jump on to the break can not kind of like Works 64 00:06:06,560 --> 00:06:08,010 like a paragraph. 65 00:06:08,080 --> 00:06:09,870 It just creates a break. 66 00:06:10,040 --> 00:06:12,220 I've got another impled type. 67 00:06:12,290 --> 00:06:17,250 This is going out the submit button and I give it to idea of sort submit. 68 00:06:17,270 --> 00:06:22,880 The value is going to be cappalli at the bottom and watchfully read calculate and when you press on 69 00:06:22,880 --> 00:06:29,630 the coquelin button it all to the actual calculation of the BMI. 70 00:06:29,630 --> 00:06:34,670 Here we've got an idea and I've given it a value or result. 71 00:06:34,690 --> 00:06:37,120 Again this is not a div. 72 00:06:37,170 --> 00:06:45,570 People will display the results of the completed BMI So this is where the output will be rendered. 73 00:06:45,590 --> 00:06:49,250 I've got the deal here coord weight guy. 74 00:06:49,390 --> 00:06:58,610 This business really is just some text guide that will guide users to where they are under weight over 75 00:06:58,620 --> 00:07:02,200 weight in relation to the beer. 76 00:07:02,230 --> 00:07:05,020 My SO to just say be my weight guide. 77 00:07:05,230 --> 00:07:10,170 If you are on the way this is of value and it is eighteen point six million or more. 78 00:07:10,190 --> 00:07:16,730 No more range or normal weight would be eighteen point six and twenty four point nine to anything greater 79 00:07:16,730 --> 00:07:21,570 than twenty four point nine is going to be regarded as overweight. 80 00:07:21,660 --> 00:07:22,340 All right. 81 00:07:22,340 --> 00:07:25,050 And this is where did Deve ends. 82 00:07:25,060 --> 00:07:32,210 And just before the close in body tag got a discreet tag with this source source both women's wear might 83 00:07:32,210 --> 00:07:33,720 get in the script from. 84 00:07:33,740 --> 00:07:34,570 This is an a b b. 85 00:07:34,600 --> 00:07:36,530 Still no javascript. 86 00:07:36,530 --> 00:07:43,370 This is the javascript file that will contain whichever script that will be responsible for computing 87 00:07:43,370 --> 00:07:47,850 or complete in the b.m. I am going to call the javascript fire BMI. 88 00:07:48,000 --> 00:07:48,460 G. 89 00:07:48,510 --> 00:07:48,910 S. 90 00:07:48,940 --> 00:07:53,070 I have not created a yet but when I do I am going to call it B. 91 00:07:53,090 --> 00:07:54,350 My g. 92 00:07:54,360 --> 00:07:56,880 S and thus a closed script. 93 00:07:57,210 --> 00:08:04,110 My closing body tag and my closing his team am just going to click on C to save all. 94 00:08:04,160 --> 00:08:12,230 How quickly open up the file so we can see what it looks like someone opened up the directory and double 95 00:08:12,230 --> 00:08:14,740 click on this so we can see. 96 00:08:15,150 --> 00:08:22,500 Ah so this is what the cat collector looked that kind of momently BMI calculator. 97 00:08:22,790 --> 00:08:31,830 So we're going to see SS later to make it look more presentable So that's it for this lecture. 98 00:08:31,850 --> 00:08:39,750 We created the directory for the projet we've also created the hastier mail structure in the next charm. 99 00:08:39,780 --> 00:08:50,830 Go add some see SS Before we go on in the show after that to create the javascript functionality. 100 00:08:50,840 --> 00:08:53,160 Many thanks for watching and bye for now.